<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入css文件 -->
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./fonts/icomoon.css" />
    <!-- 导入js文件 -->
    <script src="./js/jquery-1.12.4.js"></script>
    <script src="./js/index.js"></script>
    <!-- 导入echarts -->
    <script src="./js/echarts.js"></script>
    <script src="./js/china.js"></script>
    <script src="./js/tubiao.js"></script>
  </head>
  <body>
    <!-- 版心 -->
    <div class="container">
      <!-- 第一列 -->
      <div class="column">
        <!-- 1.数据概览 -->
        <div class="overview panel">
          <div class="inner">
            <div class="item">
              <h4>2,190</h4>
              <span
                ><i class="icon-dot" style="color: #006bff"></i> 设备总数</span
              >
            </div>
            <div class="item">
              <h4>190</h4>
              <span
                ><i class="icon-dot" style="color: #69cba3"></i> 季度新增</span
              >
            </div>
            <div class="item">
              <h4>3,001</h4>
              <span
                ><i class="icon-dot" style="color: #69cba3"></i> 运营设备</span
              >
            </div>
            <div class="item">
              <h4>108</h4>
              <span
                ><i class="icon-dot" style="color: #ed3f35"></i> 异常设备</span
              >
            </div>
          </div>
        </div>
        <!-- 2.设备监控 -->
        <div class="monitor panel">
          <div class="inner">
            <!-- 2.1 顶部tab栏 -->
            <div class="tabs">
              <a class="active" href="javascript:">故障设备监控</a>
              <a href="javascript:">异常设备监控</a>
            </div>
            <!-- 2.2 内容区域 -->
            <div class="content">
              <!-- 头部内容 -->
              <div class="head">
                <span>故障时间</span>
                <span>设备地址</span>
                <span>异常代码</span>
              </div>
              <!-- 轮播图窗口 -->
              <div class="carousel-view">
                <!-- 轮播盒子 -->
                <div class="carousel">
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>湖北省武汉市黄陂区黑马程序员206教室</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>湖北省武汉市黄陂区黑马程序员206教室</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>湖北省武汉市黄陂区黑马程序员206教室</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>湖北省武汉市黄陂区黑马程序员206教室</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>湖北省武汉市黄陂区黑马程序员206教室</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>湖北省武汉市黄陂区黑马程序员206教室</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>湖北省武汉市黄陂区黑马程序员206教室</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>湖北省武汉市黄陂区黑马程序员206教室</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>湖北省武汉市黄陂区黑马程序员206教室</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>湖北省武汉市黄陂区黑马程序员206教室</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>湖北省武汉市黄陂区黑马程序员206教室</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>湖北省武汉市黄陂区黑马程序员206教室</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>湖北省武汉市黄陂区黑马程序员206教室</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>湖北省武汉市黄陂区黑马程序员206教室</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>湖北省武汉市黄陂区黑马程序员206教室</span>
                    <span>1000001</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 另一个content -->
            <div class="content" style="display: none">
                <!-- 头部内容 -->
                <div class="head">
                  <span>异常时间</span>
                  <span>设备地址</span>
                  <span>异常代码</span>
                </div>
                <!-- 轮播图窗口 -->
                <div class="carousel-view">
                  <!-- 轮播盒子 -->
                  <div class="carousel">
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区黑马程序员206教室</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区黑马程序员206教室</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区黑马程序员206教室</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区黑马程序员206教室</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区黑马程序员206教室</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区黑马程序员206教室</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区黑马程序员206教室</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区黑马程序员206教室</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区黑马程序员206教室</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区黑马程序员206教室</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区黑马程序员206教室</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区黑马程序员206教室</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区黑马程序员206教室</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区黑马程序员206教室</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区黑马程序员206教室</span>
                      <span>1000002</span>
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
        <!-- 3.点位分布 -->
        <div class="point panel">
          <div class="inner">
            <h3>点位分布统计</h3>
            <div class="chart clearfix">
              <div class="pie"></div>
              <div class="data">
                <div class="item">
                  <h4>320,11</h4>
                  <span
                    ><i class="icon-dot" style="color: #ed3f35"></i>
                    点位总数</span
                  >
                </div>
                <div class="item">
                  <h4>418</h4>
                  <span
                    ><i class="icon-dot" style="color: #e9cf19"></i>
                    本月新增</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 第二列 -->
      <div class="column">
        <!-- 地图 -->
        <div class="map">
          <h3><i class="icon-cube" style="color: #68d8fe"></i> 设备数据统计</h3>
          <div class="china"></div>
        </div>
        <!-- 用户统计 -->
        <div class="user panel">
          <div class="inner">
            <h3>全国用户总量统计</h3>
            <div class="chart">
              <div class="bar"></div>
              <div class="data">
                <div class="item">
                  <h4>120,899</h4>
                  <span
                    ><i class="icon-dot" style="color:#ed3f35"></i
                    >用户总量</span
                  >
                </div>
                <div class="item">
                  <h4>248</h4>
                  <span
                    ><i class="icon-dot" style="color:#e9cf19"></i
                    >本月新增</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 第三列 -->
      <div class="column">
        <!-- 1.订单统计 -->
        <div class="order panel">
          <div class="inner">
            <!-- 日期筛选 -->
            <div class="filter">
              <a href="javascript:">365天</a>
              <a href="javascript:">90天</a>
              <a class="active" href="javascript:">30天</a>
              <a href="javascript:">24小时</a>
            </div>
            <!-- 数据 -->
            <div class="data">
              <div class="item">
                <h4>1,987</h4>
                <span
                  ><i class="icon-dot" style="color: #ed3f35"></i>订单量</span
                >
              </div>
              <div class="item">
                <h4>3834</h4>
                <span
                  ><i class="icon-dot" style="color: #ed3f35"></i
                  >销售额(万元)</span
                >
              </div>
            </div>
          </div>
        </div>
        <!-- 2.销售额统计 -->
        <div class="sale panel">
          <div class="inner">
            <div class="head">
              <h3>销售额统计</h3>
              <!-- 日期筛选 -->
              <div class="filter">
                <a href="javascript:">年</a>
                <a href="javascript:">季</a>
                <a class="active" href="javascript:">月</a>
                <a href="javascript:">周</a>
              </div>
            </div>
            <!-- 折线图 -->
            <div class="line"></div>
          </div>
        </div>
        <!-- 3.渠道分布与季度销售 -->
        <div class="wrap">
          <!-- 渠道分布 -->
          <div class="channel panel">
            <div class="inner">
              <h3>渠道分布</h3>
              <div class="data">
                <div class="item">
                  <h4>
                    39 <small><small>%</small></small>
                  </h4>
                  <span><i class="icon-plane"></i> 机场</span>
                </div>
                <div class="item">
                  <h4>
                    28 <small><small>%</small></small>
                  </h4>
                  <span><i class="icon-bag"></i> 商场</span>
                </div>
                <div class="item">
                  <h4>
                    20 <small><small>%</small></small>
                  </h4>
                  <span><i class="icon-train"></i> 地铁</span>
                </div>
                <div class="item">
                  <h4>
                    13 <small><small>%</small></small>
                  </h4>
                  <span><i class="icon-bus"></i> 火车站</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 季度销售 -->
          <div class="quarter panel">
            <div class="inner">
              <h3>一季度销售进度</h3>
              <div class="chart">
                <div class="circle"></div>
                <h4>75 <small>%</small></h4>
              </div>
              <div class="data">
                <div class="item">
                  <h4>1,321</h4>
                  <span
                    ><i class="icon-dot" style="color: #69cba3"></i
                    >销售额(万元)</span
                  >
                </div>
                <div class="item">
                  <h4>150%</h4>
                  <span
                    ><i class="icon-dot" style="color: #ed3f35"></i
                    >同比增长</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 4.全国热榜 -->
        <div class="hot panel">
          <div class="inner">
            <div class="left">
              <h3>全国热榜</h3>
              <ul>
                <li>
                  <i class="icon-cup1" style="color:#d93f36"></i>
                  <span>可爱多</span>
                </li>
                <li>
                  <i class="icon-cup2" style="color:#68d8fe"></i>
                  <span>娃哈哈</span>
                </li>
                <li>
                  <i class="icon-cup3" style="color:#4c9bfd"></i>
                  <span>喜之郎</span>
                </li>
              </ul>
            </div>
            <div class="right">
              <div class="head">
                <h3>各省热榜</h3>
                <span>//近30日//</span>
              </div>
              <div class="content">
                <ul class="ul-left">
                  <li class="active">
                    <span>北京</span>
                    <span
                      >25,179 <i class="icon-up" style="color:#dc3c33"></i
                    ></span>
                  </li>
                  <li>
                    <span>河北</span>
                    <span
                      >23,252 <i class="icon-down" style="color:#36be90"></i
                    ></span>
                  </li>
                  <li>
                    <span>上海 </span>
                    <span
                      >20,760 <i class="icon-up" style="color:transparent"></i
                    ></span>
                  </li>
                  <li>
                    <span>江苏</span>
                    <span
                      >20,760 <i class="icon-up" style="color:transparent"></i
                    ></span>
                  </li>
                  <li>
                    <span>山东</span>
                    <span
                      >20,760 <i class="icon-up" style="color:transparent"></i
                    ></span>
                  </li>
                </ul>
                <ul class="ul-right">
                  <li>
                    <span>八喜</span>
                    <span
                      >25,179 <i class="icon-up" style="color:#dc3c33"></i
                    ></span>
                  </li>
                  <li>
                    <span>好多鱼</span>
                    <span
                      >23,252 <i class="icon-down" style="color:#36be90"></i
                    ></span>
                  </li>
                  <li>
                    <span>娃哈哈 </span>
                    <span
                      >20,760 <i class="icon-up" style="color:transparent"></i
                    ></span>
                  </li>
                  <li>
                    <span>可爱多</span>
                    <span
                      >20,760 <i class="icon-up" style="color:transparent"></i
                    ></span>
                  </li>
                  <li>
                    <span>喜之郎</span>
                    <span
                      >20,760 <i class="icon-up" style="color:transparent"></i
                    ></span>
                  </li>
                  <li>
                    <span>快乐水</span>
                    <span
                      >20,760 <i class="icon-up" style="color:transparent"></i
                    ></span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
